<template>
  <view class="detail-area">
    <!-- <u-navbar :autoBack="true" :leftIconColor="titleColor" :border-bottom="false" :bgColor="'transparent'"></u-navbar> -->
    <view class="u-content">
      <view class="top-mes">
        <view class="door-name u-flex">
          <text class="u-line-1">{{ doorName }}</text>
          <text>·{{ deskMes.storeRoomName }}</text>
          <!-- <view class="detail-icon u-flex">
            <text>详情</text>
            <u-icon name="arrow-right" size="14" color="#666666"></u-icon>
          </view> -->
        </view>
        <view class="desk-price u-flex">
          <view class="u-flex">
            <view class="price-item">
              台球：
              <text>{{ poolTablePrice }}</text>
              元/小时
            </view>
            <view class="price-item">
              押金：
              <text>{{ deposit }}</text>
              元
            </view>
          </view>
          <!-- <view class="prefer-date">
            优惠时段
          </view> -->
        </view>
      </view>
      <view class="cz-area u-flex">
        <view class="cz-left u-flex">
          <image src="../../static/bill.png" mode=""></image>
          <view class="price-rig">
            <view>会员余额</view>
            <view class="">
              <text>{{ sumUserBalance }}</text>
              元
            </view>
          </view>
        </view>
        <view class="cz-btn" @click="goPage('/pages/subPack/discounts/details?nav=1')">
          立即充值
        </view>
      </view>
      <view class="cz-type">
        <view class="top-active u-flex" v-show="false">
          <view class="cz-num u-flex">
            <view>
              充值活动
            </view>
            <view>
              |
            </view>
            <view>
              冲100 送 50
            </view>
          </view>
          <view class="detail-icon u-flex">
            <text>去查看</text>
            <u-icon name="arrow-right" size="14" color="#ffffff"></u-icon>
          </view>
        </view>
        <view class="cz-list-type u-flex">
          <view class="cz-item-type" :class="{'no-available':isAvailable}" @click="showNotify('VIP_OPEN')">
            <view class="cz-item-name u-flex">
              <image src="../../static/vip-icon.png" mode=""></image>
              <text>会员开台</text>
            </view>
            <view class="des">
              会员余额≥{{ deposit }}元，可直接开台
            </view>
          </view>
          <view class="cz-item-type" @click="showNotify('DEPOSIT_RENEW')">
            <view class="cz-item-name u-flex">
              <image src="../../static/yj-icon.png" mode=""></image>
              <text>押金开台</text>
            </view>
            <view class="des">
              押金{{ deposit }}元,关灯结账退回
            </view>
          </view>
          <view class="cz-item-type" @click="showNotify('PICK_TIME')">
            <view class="cz-item-name u-flex">
              <image src="../../static/ds-icon.png" mode=""></image>
              <text>定时开台</text>
            </view>
            <view class="des">
              自选开台时长，无押金
            </view>
          </view>
          <view class="cz-item-type" v-if="storeRoomItem.douyinShop" @click="showNotify('DOUYIN_PAY')">
            <view class="cz-item-name u-flex">
              <image src="../../static/dy-icon.png" mode=""></image>
              <text>抖音验券</text>
            </view>
            <view class="des">
              使用抖音验券开台
            </view>
          </view>
          <view class="cz-item-type" v-if="storeRoomItem.meituanShop" @click="showNotify('MEITUAN_PAY')">
            <view class="cz-item-name u-flex">
              <image src="../../static/mt-icon.png" mode=""></image>
              <text>美团验券</text>
            </view>
            <view class="des">
              使用美团验券开台
            </view>
          </view>
          <view class="cz-item-type" @click="showNotify('LOSER_PAY')">
            <view class="cz-item-name u-flex">
              <image src="../../static/sj-icon.png" mode=""></image>
              <text>输家付款</text>
            </view>
            <view class="des">
              PK输家进行付款
            </view>
          </view>
          <view class="cz-item-type" @click="showNotify('AAPAY')">
            <view class="cz-item-name u-flex">
              <image src="../../static/aa-icon.png" mode=""></image>
              <text>AA付款</text>
            </view>
            <view class="des">
              各方分别付款
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup :show="showSubYue" mode="bottom" @close="closeSubYue">
      <template v-if="notifyId==='LOSER_PAY'||notifyId==='AAPAY'">
        <NotifyBall :notifyId="notifyId" @closeSubYue="closeSubYue"></NotifyBall>
      </template>
      <template v-else-if="notifyId==='VIP_OPEN'">
        <VipOpen :notifyId="notifyId" :couponsList="myCouponList" :cz-list="rechargeRuleList" :payDate="payDate" @payOrder="vipOpenTable" @closeSubYue="closeSubYue"></VipOpen>
      </template>
      <template v-else-if="notifyId==='PICK_TIME'">
        <RegularOpen :notifyId="notifyId" :payDate="payDate" @payOrder="vipOpenTable" @closeSubYue="closeSubYue"></RegularOpen>
      </template>
      <template v-else-if="notifyId==='DOUYIN_PAY'||notifyId==='MEITUAN_PAY'">
        <ScanOpen :notifyId="notifyId" @closeSubYue="closeSubYue"></ScanOpen>
      </template>
      <template v-else-if="notifyId==='DEPOSIT_RENEW'">
        <invitBall :notifyId="notifyId" :payDate="payDate" @payOrder="vipOpenTable" @closeSubYue="closeSubYue"></invitBall>
      </template>
    </u-popup>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'
import {userBalanceList,rechargeRuleList} from "@/api/recharge";
import {orderPay} from '@/api/order';
import { myCouponList } from "@/api/coupon";

export default {
  data() {
    return {
      title: '',
      titleColor: '#333333',
      showSubYue: false, //开台弹窗
      notifyId: 'VIP_OPEN', //LOSER_PAY 输家付款，AAPAY AA付款,VIP_OPEN Vip开台,PICK_TIME 定时开台,DOUYIN_PAY、MEITUAN_PAY团购开台,DEPOSIT_RENEW 押金开台
      deskMes: {},
      doorName: '',
      teaChildId: 0,
      sumUserBalance: 0,//会员余额
      poolTablePrice: 0,//单价
      deposit: 0,//押金
      storeRoomItem: {},
      isAvailable: false,
      myCouponList: [],//优惠券列表
      rechargeRuleList: [],//充值规则
      billingCfg:{},//计费规则
    }
  },
  computed: {
    userInfo() {
      return mapGetters(['userInfo']);
    },
    payDate() {//支付参数
      return {
        poolTablePrice: this.poolTablePrice,
        deposit: this.deposit,
        sumUserBalance: this.sumUserBalance,
        billingCfg: this.billingCfg
      }
    }
  },
  onLoad(option) {
    this.storeRoomItem = JSON.parse(option.storeRoom)
    this.deskMes = JSON.parse(option.deskMes)
    //console.log(this.storeRoomItem)
    console.log(this.deskMes)
    this.doorName = this.storeRoomItem.name;
    this.poolTablePrice = this.storeRoomItem.poolTablePrice;
    this.deposit = this.deskMes.deposit;
    this.billingCfg = this.deskMes.billingCfg;
  },
  onShow() {
    console.log("onShow")
    this.userStat();
    this.getMyCouponList();
    this.getRechargeRule();
  },
  methods: {
    getMyCouponList() {
      let status='A'
      let param = {
        status:status,
        queryTypeScope:2,
        storeId:this.storeRoomItem.id
      }
      myCouponList(param).then(res => {
        let tempList = [];
        if(res.data.myCouponList.content.length>0){
          tempList.push({dealName:'不使用优惠券'})
          res.data.myCouponList.content.forEach(item=>{
            item.dealName = item.name+'（满'+item.reachMoney+'减'+item.amount+'）';
            tempList.push(item);
          });
        }
        this.myCouponList = [tempList];
      })
    },
    userStat() {
      let param = {
        storeId: this.storeRoomItem.id
      }
      userBalanceList(param).then(res => {
        this.sumUserBalance = res.data[0].userBalance;
        //判断会员余额大于押金时，会员开台可用
        if (this.sumUserBalance < this.deposit) {
          this.isAvailable = true
        }
      })
    },
    onChange(e) {
      this.timeData = e
    },
    //关闭开台
    closeSubYue() {
      this.showSubYue = false
      console.log(this.showSubYue)
    },
    //选择约球开台
    showNotify(id) {
      this.notifyId = id;
      this.showSubYue = true
      let orderMoney = this.deposit;
      // time.endTime.selectDate
      /* let url = '/pages/subPack/orderList/closeAccount'+'?teaId='+this.storeRoomItem.id + '&teaChildId='+this.deskMes.roomId + '&storeRoomName='+this.deskMes.storeRoomName +
        '&storeName='+this.storeRoomItem.name + '&image=' + this.deskMes.icon + '&orderMoney=' + orderMoney + '&selectTimeText=' +
        '&price='+this.deskMes.price +'&timeInterval='+'&repeatPrice='+this.deskMes.repeatPrice +'&isRepeat=0'+'&parentOrderId=0'+'&orderType=1'
      uni.navigateTo({
        url
      }) */
    },
    getRechargeRule() {
      rechargeRuleList({storeId:this.storeRoomItem.id}).then(res => {
        // 如果商家没有设置充值信息，则给用户提示
        if(res.data.rechargeRuleList.length > 0){
          this.rechargeRuleList = res.data.rechargeRuleList;
        }
      })
    },
    //选择会员开台，点击确认开台后，进行支付开台
    vipOpenTable(pay) {
      let param = {
        teaId: this.storeRoomItem.id,
        teaChildId: this.deskMes.roomId,
        useCouponId: pay.useCouponId,
        useHourCouponId: pay.useHourCouponId,
        payType: pay.payType, //支付方式
        timeInterval: 0,    //时间间隔
        parentOrderId: 0,   //续费前的订单ID
        isRepeat: 0,        //是否续费
        orderType: pay.notifyId,   //订单类型
        rechargeMoney: pay.rechargeMoney,//充值金额
        dateCount:pay.dateCount,
      }
      orderPay(param).then(res => {
        //如果包含充值金额，则弹出支付界面
        let url;
        console.log(res)
        const payment = res.data.payment;
        if (res.status === 200) {
          if (payment.payMoney0Success === '1') {
            uni.showToast({
              title: '开台成功！',
              icon: 'success',
              duration: 3000,
            })
            url = "/pages/order/order";
            uni.switchTab({
              url
            })
          } else if (payment.payMoney0Success === '2') {
            //微信支付参数有：timeStamp 时间戳,nonceStr  随机字符串，package   统一下单接口返回的prepay_id参数值，signType  签名算法，paySign 签名
            uni.requestPayment({
              provider: 'wxpay',
              timeStamp: payment.timeStamp,
              nonceStr: payment.nonceStr,
              package: payment.package,
              signType: payment.signType,
              paySign: payment.paySign,
              success: function (res) {
                uni.showToast({
                  title: '支付成功！',
                  icon: 'success',
                  duration: 3000,
                });
                //通知后端修改订单状态
                payOrder(res.data.payment.orderId, 'wxPay', '1').then(res => {
                  console.log(res)
                })
                url = "/pages/order/order";
                uni.switchTab({
                  url
                })
              }, fail: function (err) {
                uni.showToast({
                  title: "支付失败",
                  icon: "none",
                  duration: 2000,
                });
              }
            })
          } else {
            uni.showToast({
              title: "支付失败",
              icon: "none",
              duration: 2000,
            });
          }
        } else {
          uni.showToast({
            title: "支付失败，失败原因：" + res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      }).catch(err => {
        uni.showToast({
          title: err.msg,
          icon: 'none'
        });
      });
    },
    //跳转
    goPage(url) {
      uni.navigateTo({
        url
      })
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: url(https://qn.zqbond.com/wxmp/detail-bg.png) no-repeat;
  background-size: 100% 1334rpx;
}

.u-content {
  // margin-top: 100rpx;
  font-size: 34rpx;

  .top-mes {
    margin-left: 30rpx;

    .door-name {
      font-size: 40rpx;
      font-weight: bold;
      max-width: 600rpx;
      align-items: flex-end;

      .detail-icon {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
        margin-left: 20rpx;
      }
    }

    .desk-price {
      margin: 26rpx 0;
      position: relative;

      .price-item {
        font-size: 26rpx;
        font-weight: bold;
        color: #333333;
        margin-right: 30rpx;

        > text {
          color: #FF7814;
        }
      }

      .prefer-date {
        position: absolute;
        right: 0;
        top: 0;
        width: 127rpx;
        height: 44rpx;
        border: 1rpx solid #FF7814;
        border-right: none;
        border-radius: 22rpx 0px 0px 22rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #FF7814;
        text-align: center;
        line-height: 46rpx;
      }
    }
  }

  .cz-area {
    width: 687rpx;
    height: 206rpx;
    background: url(https://qn.zqbond.com/wxmp/cz-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 20rpx 30rpx 50rpx;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 50rpx auto 0;

    .cz-left {
      image {
        width: 92rpx;
        height: 98rpx;
        margin-right: 20rpx;
      }

      .price-rig {
        > view {
          &:nth-child(1) {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 16rpx;
          }

          &:nth-child(2) {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;

            text {
              font-size: 50rpx;
              color: #FF7814;
            }
          }
        }
      }
    }

    .cz-btn {
      width: 226rpx;
      height: 82rpx;
      line-height: 82rpx;
      background: #FF7814;
      box-shadow: 0px -2rpx 0px 0px rgba(146, 62, 0, 0.55), 0px 2rpx 0px 0px rgba(255, 253, 227, 0.6);
      border-radius: 41rpx;
      font-size: 32rpx;
      font-weight: 800;
      color: #FFFFFF;
      text-align: center;
    }
  }

  .cz-type {
    margin-top: -30rpx;

    .top-active {
      padding: 20rpx 30rpx;
      background-color: #333333;
      border-top-left-radius: 30rpx;
      border-top-right-radius: 30rpx;
      justify-content: space-between;

      .cz-num {
        > view {
          &:nth-child(1) {
            font-size: 34rpx;
            font-style: oblique;
            font-weight: bold;
            color: #FCE3AB;
          }

          &:nth-child(2) {
            font-size: 26rpx;
            color: #FCE3AB;
            margin: 0 20rpx;
          }

          &:nth-child(3) {
            font-size: 26rpx;
            color: #FCE3AB;
          }
        }
      }

      .detail-icon {
        font-size: 28rpx;
        color: #ffffff;
      }
    }

    .cz-list-type {
      padding: 30rpx 30rpx 0;
      box-sizing: border-box;
      // height: 800rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      flex-wrap: wrap;
      justify-content: space-between;

      .cz-item-type {
        width: 336rpx;
        height: 132rpx;
        background: #FFF8F2;
        border-radius: 8rpx;
        margin-bottom: 26rpx;
        padding: 20rpx 16rpx;
        box-sizing: border-box;

        .cz-item-name {
          margin-bottom: 18rpx;

          image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }

          font-size: 30rpx;
          font-weight: 800;
          color: #333333;
        }

        .des {
          font-size: 22rpx;
          font-weight: 500;
          color: #666666;
        }
      }

      .no-available {
        pointer-events: none;
        -webkit-filter: grayscale(100%); /* webkit */
        -moz-filter: grayscale(100%); /*firefox*/
        -ms-filter: grayscale(100%); /*ie9*/
        -o-filter: grayscale(100%); /* opera */
        filter: grayscale(100%);

      }
    }
  }
}
</style>
